<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let router = useRouter()
	let goodsObj = ref()
	let vipList = ref()
	let vipCardItem = ref(null)
	let payObj = ref(null)
	onUnload(() => {
		uni.$emit('goodsTopOn', {
			flag: 0
		})
	})
	onLoad((option) => {
		console.log(JSON.parse(option.data));
		goodsObj.value = JSON.parse(option.data)
		getCard()
	})
	onShow(() => {
		if (payObj.value != null) {
			chadingdan()
		}
	})
	const getCard = () => {
		proxy.$req('GET', proxy.$api.getGoodsCardTop, {}).then((res) => {
			console.log(res);
			vipList.value = res.result.records
			vipCardItem.value = vipList.value[0]
		})
	}
	const buyCard = () => {
		proxy.$req('POST', proxy.$api.payGoodsCard, {
			cardId: vipCardItem.value.id,
			productId: goodsObj.value.id,
		}).then((res) => {
			let url = JSON.parse(res.result.result).resp_data.counter_url
			payObj.value = JSON.parse(res.result.result)
			// #ifdef APP-PLUS
			plus.runtime.openURL(url)
			console.log('app');
			// #endif 
			// #ifdef H5
			window.open(url)
			console.log('h5');
			// #endif
		})
	}
	const chadingdan = () => {
		proxy.$req('POST', proxy.$api.chadingdan, {
			tradeNo: payObj.value.resp_data.out_order_no,
			payId: payObj.value.resp_data.pay_order_no,
		}).then((res) => {
			uni.$emit('goodsTopOn', {
				flag: 1
			})
			let data1 = JSON.parse(res.result).resp_data
			console.log(data1);
			if (data1.order_status == 0) {
				uni.$u.toast('待支付')
			} else if (data1.order_status == 1) {
				uni.$u.toast('支付中')
			} else if (data1.order_status == 2) {
				uni.$u.toast('支付成功')
				router.push({
					name: 'payStatus',
					params: {
						status: '支付成功',
						backNum: 2
					}
				})
			} else if (data1.order_status == 3) {
				uni.$u.toast('支付失败')
			} else if (data1.order_status == 4) {
				uni.$u.toast('订单已过期')
			} else if (data1.order_status == 5) {
				uni.$u.toast('订单已取消')
			} else if (data1.order_status == 6) {
				uni.$u.toast('部分退款或者全部退款')
			}
		})
	}
	const choseCard = () => {
		let arr = vipList.value.map((item) => item.cardName)
		uni.showActionSheet({
			itemList: arr,
			success: function (res) {
				vipCardItem.value = vipList.value[res.tapIndex]
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
</script>

<template>
	<view class="headBackground">
		<u-navbar class="navbar" bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
			<template #center>
				<view style="font-weight: 600;">商品置顶</view>
			</template>
		</u-navbar>
		<view class="title">
			置顶，页面前排展示
		</view>
		<view class="text">
			<view>更多曝光，更多关注</view>
			<view>一键设置，操作简单</view>
		</view>
	</view>
	<view class="main">
		<view class="mainLine ">
			<view class="text">
				置顶商品
			</view>
			<view class="u-line-1" style="width: 450rpx;">
				{{ goodsObj.name }}
			</view>
		</view>
		<view class="mainLine" v-if="vipCardItem!=null">
			<view class="text">置顶时长</view>
			<view class="r-flex-center-center" @click="choseCard">
				{{ vipCardItem.cardName }}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
	<view class="foot" v-if="vipCardItem!=null">
		<view class="footMain">
			<view class="footLeft">
				<view>
					<text class="footTitle">月卡</text><text style="color: red;">￥</text><text
						class="footnum intFont">{{ vipCardItem.money }}</text>
				</view>
				<view class="footDay">
					{{ (vipCardItem.money / vipCardItem.days).toFixed(4) }}元/天
				</view>
			</view>
			<view class="footRight" @click="buyCard">
				立即购买
			</view>
		</view>

	</view>
</template>

<style lang="scss">
	.headBackground {
		width: 750rpx;
		height: 672rpx;
		background-image: url(@/static/images/mineBg.png);
		background-size: cover;
		padding: 0 50rpx;
		box-sizing: border-box;

		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin: 50rpx 0;
		}
	}

	.main {
		margin-top: -200rpx;
		background: #FFFFFF;
		width: 750rpx;
		height: 500rpx;

		.mainLine {
			height: 120rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;
			line-height: 120rpx;

			.text {
				font-weight: 500;
				font-size: 35rpx;
			}
		}
	}

	.foot {
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		padding: 0rpx 40rpx;
		box-sizing: border-box;

		.footMain {
			display: flex;
			justify-content: space-between;

			.footnum {
				font-size: 56rpx;
				font-weight: bold;
				color: #F22F19;
			}

			.footTitle {
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}

			.footDay {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
			}

			.footRight {
				margin-top: 12rpx;
				width: 440rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #FFFFFF;
				background: linear-gradient(137deg, #8F3D47 0%, #CA5F74 100%);
				border-radius: 16rpx;
			}
		}
	}
</style>